import React from 'react';
import {
    Form, Input,
    Button, message
} from 'antd';
import {
    withRouter
} from "react-router-dom";
import { API } from './net/api';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import './Login.css';
import 'antd/dist/antd.css';

class Login extends React.Component {

    render() {
        let {history} = this.props;

        const onFinish = values => {
            API('login',{
                id: values.account,
                pwd: values.password
            }).then(res => {
                if (res.retcode === '0000') {
                    let storage = window.localStorage;
                    storage.setItem('name', res.data.userName);
                    storage.setItem('token', res.data.token);
                    message.success('登录成功');
                    history.push({pathname: '/book'})
                } else {
                    message.error(res.errorMsg);
                }
            });
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        return (
            <div className="login-form">
                <div className='titleArea'>
                    <span className='title'><i>ecnu</i>&nbsp;创意空间预定</span>
                </div>
                <Form
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    wrapperCol={24}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item name="account"
                               rules={[
                                   {
                                       required: true,
                                       message: '请输入公共数据库账号!',
                                   },
                               ]}
                    >
                        <Input placeholder="公共数据库账号" prefix={<UserOutlined/>}/>
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input.Password placeholder="密码" prefix={<LockOutlined/>}/>

                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" block style={{marginBottom: "5px"}}>
                            登录
                        </Button>
                        首次使用？ <a href="/register">请先注册</a>
                    </Form.Item>
                </Form>
            </div>

        );
    }
}

export default withRouter(Login);